<!DOCTYPE html>
<html>
<head>
	<title>商品溯源 - 雁农冷链平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<style>
		.trace-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.search-box {
			margin-bottom: 20px;
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.qr-scanner {
			margin-top: 15px;
			padding: 20px;
			background: #f8f9fa;
			border-radius: 8px;
			border: 2px dashed #409EFF;
			text-align: center;
		}
		.trace-result {
			margin-top: 20px;
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.product-info {
			margin-bottom: 30px;
			padding: 20px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 10px;
		}
		.trace-timeline {
			position: relative;
			padding-left: 30px;
		}
		.trace-timeline::before {
			content: '';
			position: absolute;
			left: 15px;
			top: 0;
			bottom: 0;
			width: 2px;
			background: #e4e7ed;
		}
		.trace-step {
			position: relative;
			margin-bottom: 30px;
			padding: 20px;
			background: #fff;
			border-radius: 10px;
			border: 1px solid #e4e7ed;
			transition: all 0.3s ease;
		}
		.trace-step:hover {
			box-shadow: 0 4px 20px rgba(0,0,0,0.1);
			transform: translateY(-2px);
		}
		.trace-step::before {
			content: '';
			position: absolute;
			left: -37px;
			top: 25px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #409EFF;
			border: 3px solid #fff;
			box-shadow: 0 0 0 2px #409EFF;
		}
		.step-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
		}
		.step-title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			display: flex;
			align-items: center;
		}
		.step-icon {
			margin-right: 8px;
			font-size: 20px;
		}
		.step-time {
			color: #909399;
			font-size: 14px;
		}
		.step-content {
			color: #666;
			line-height: 1.8;
		}
		.step-details {
			margin-top: 15px;
			padding: 15px;
			background: #f8f9fa;
			border-radius: 8px;
		}
		.detail-item {
			margin-bottom: 8px;
			display: flex;
		}
		.detail-label {
			width: 100px;
			font-weight: bold;
			color: #333;
		}
		.detail-value {
			flex: 1;
			color: #666;
		}
		.certificates {
			margin-top: 15px;
		}
		.cert-item {
			display: inline-block;
			margin-right: 10px;
			margin-bottom: 8px;
		}
		.download-section {
			margin-top: 30px;
			padding: 20px;
			background: #f0f9ff;
			border-radius: 10px;
			border: 1px solid #b3d8ff;
		}
		.qr-code {
			width: 120px;
			height: 120px;
			margin: 10px auto;
			background: #f5f5f5;
			border: 1px solid #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #999;
		}
	</style>
</head>
<body>
	<div id="app" class="vue-admin-beautiful-wrapper">
		<div class="trace-container">
			<!-- 搜索框 -->
			<div class="search-box">
				<h2 style="margin-bottom: 20px; color: #333;">🔍 商品溯源查询</h2>
				<el-form :inline="true" :model="searchForm" class="demo-form-inline">
					<el-form-item label="溯源码">
						<el-input v-model="searchForm.traceCode" placeholder="请输入20位溯源码" style="width: 300px;" maxlength="20">
							<template slot="prepend">🏷️</template>
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchTrace" :loading="loading">查询溯源</el-button>
						<el-button @click="resetForm">重置</el-button>
						<el-button type="success" @click="showScanner" icon="el-icon-camera">扫码查询</el-button>
					</el-form-item>
				</el-form>
				
				<!-- 二维码扫描区域 -->
				<div class="qr-scanner" v-if="showQRScanner">
					<div class="qr-code">
						📱 扫描二维码区域<br>
						<small>将商品二维码对准此区域</small>
					</div>
					<el-button size="small" @click="simulateQRScan">模拟扫码</el-button>
					<el-button size="small" @click="showQRScanner = false">关闭扫码</el-button>
				</div>
			</div>

			<!-- 溯源结果 -->
			<div class="trace-result" v-if="traceData">
				<!-- 商品基本信息 -->
				<div class="product-info">
					<h3 style="margin: 0 0 15px 0; font-size: 24px;">📦 {{ traceData.productName }}</h3>
					<el-row :gutter="20">
						<el-col :span="8">
							<p><strong>溯源码：</strong>{{ traceData.traceCode }}</p>
							<p><strong>生产批次：</strong>{{ traceData.batchNo }}</p>
						</el-col>
						<el-col :span="8">
							<p><strong>生产日期：</strong>{{ traceData.productionDate }}</p>
							<p><strong>保质期：</strong>{{ traceData.expiryDate }}</p>
						</el-col>
						<el-col :span="8">
							<p><strong>产品规格：</strong>{{ traceData.specification }}</p>
							<p><strong>质量等级：</strong>{{ traceData.qualityGrade }}</p>
						</el-col>
					</el-row>
				</div>

				<h3 style="margin-bottom: 25px; color: #333;">🛤️ 溯源轨迹</h3>
				
				<!-- 溯源时间线 -->
				<div class="trace-timeline">
					<div class="trace-step" v-for="(step, index) in traceData.steps" :key="index">
						<div class="step-header">
							<div class="step-title">
								<span class="step-icon">{{ step.icon }}</span>
								{{ step.title }}
							</div>
							<div class="step-time">{{ step.time }}</div>
						</div>
						<div class="step-content">{{ step.content }}</div>
						
						<!-- 详细信息 -->
						<div class="step-details">
							<div class="detail-item" v-for="(detail, key) in step.details" :key="key">
								<span class="detail-label">{{ detail.label }}：</span>
								<span class="detail-value">{{ detail.value }}</span>
							</div>
							
							<!-- 相关证书 -->
							<div class="certificates" v-if="step.certificates && step.certificates.length > 0">
								<strong>相关凭证：</strong>
								<div class="cert-item" v-for="cert in step.certificates" :key="cert.id">
									<el-button size="mini" type="text" @click="downloadCert(cert)" icon="el-icon-download">
										{{ cert.name }}
									</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 溯源凭证下载区域 -->
				<div class="download-section">
					<h4 style="margin: 0 0 15px 0; color: #333;">📋 溯源凭证下载</h4>
					<p style="margin-bottom: 15px; color: #666;">您可以下载以下溯源相关凭证，用于产品质量追溯和验证：</p>
					<el-row :gutter="15">
						<el-col :span="6" v-for="cert in allCertificates" :key="cert.id">
							<el-button type="primary" size="small" @click="downloadCert(cert)" style="width: 100%; margin-bottom: 8px;">
								<i class="el-icon-download"></i> {{ cert.name }}
							</el-button>
						</el-col>
					</el-row>
					<el-button type="success" @click="downloadAllCerts" style="margin-top: 10px;">
						<i class="el-icon-folder-opened"></i> 打包下载全部凭证
					</el-button>
				</div>
			</div>

			<div class="trace-result" v-else-if="searched">
				<el-empty description="未找到相关溯源信息"></el-empty>
			</div>
		</div>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
				el: '#app',
				data: {
					searchForm: {
						traceCode: ''
					},
					traceData: null,
					searched: false,
					loading: false,
					showQRScanner: false,
					allCertificates: []
				},
				methods: {
					searchTrace() {
						if (!this.searchForm.traceCode) {
							this.$message.warning('请输入溯源码');
							return;
						}
						
						this.loading = true;
						this.searched = true;
						
						// 模拟查询溯源数据
						setTimeout(() => {
							this.traceData = {
								productName: '衡阳湘莲',
								traceCode: this.searchForm.traceCode,
								batchNo: 'HY20240117001',
								productionDate: '2024-01-15',
								expiryDate: '2024-02-15',
								specification: '500g/盒',
								qualityGrade: 'AAA级',
								steps: [
									{
										icon: '🌱',
										title: '种植环节',
										time: '2024-01-15 08:30:00',
										content: '衡阳湘莲种植，采用传统有机种植方式，严格按照湘莲国家标准种植',
										details: [
											{label: '种植基地', value: '衡阳市蒸湘区湘莲种植合作社'},
											{label: '种植面积', value: '200亩'},
											{label: '种植方式', value: '传统有机种植'},
											{label: '负责人', value: '李师傅'}
										],
										certificates: [
											{id: 1, name: '湘莲有机认证证书'},
											{id: 2, name: '土壤检测报告'}
										]
									},
									{
										icon: '🔬',
										title: '质检环节',
										time: '2024-01-16 14:20:00',
										content: '农药残留检测合格，重金属检测合格，营养成分检测优良，湘莲品质达到AAA级标准',
										details: [
											{label: '检测机构', value: '湖南省农产品质量检测中心'},
											{label: '农药残留', value: '未检出'},
											{label: '重金属', value: '符合国家标准'},
											{label: '检验员', value: '王检验员'}
										],
										certificates: [
											{id: 3, name: '湘莲农药残留检测报告'},
											{id: 4, name: '湘莲重金属检测报告'},
											{id: 5, name: '湘莲营养成分检测报告'}
										]
									},
									{
										icon: '📦',
										title: '加工包装环节',
										time: '2024-01-17 09:15:00',
										content: '湘莲清洗、分级、真空包装，贴上衡阳湘莲专用溯源标签，确保产品新鲜度',
										details: [
											{label: '加工车间', value: '衡阳湘莲加工中心'},
											{label: '包装方式', value: '真空包装'},
											{label: '包装规格', value: '500g/盒'},
											{label: '操作员', value: '张包装员'}
										],
										certificates: [
											{id: 6, name: '湘莲包装合格证'},
											{id: 7, name: '食品安全许可证'}
										]
									},
									{
										icon: '🚚',
										title: '冷链物流环节',
										time: '2024-01-18 16:45:00',
										content: '衡阳雁农冷链物流运输，全程温度控制，GPS全程监控，保障湘莲新鲜品质',
										details: [
											{label: '物流公司', value: '衡阳雁农冷链物流'},
											{label: '运输温度', value: '0-4℃'},
											{label: '车牌号', value: '湘D·A8888'},
											{label: '司机', value: '刘师傅'}
										],
										certificates: [
											{id: 8, name: '冷链运输温度记录'},
											{id: 9, name: 'GPS轨迹记录'}
										]
									},
									{
										icon: '🛒',
										title: '销售环节',
										time: '2024-01-19 10:30:00',
										content: '衡阳湘莲上架销售，消费者可通过扫码查看完整溯源信息，享受衡阳特产美味',
										details: [
											{label: '销售平台', value: '雁农冷链平台'},
											{label: '上架时间', value: '2024-01-19 10:30:00'},
											{label: '销售价格', value: '￥34.8/盒'},
											{label: '操作员', value: '系统自动'}
										],
										certificates: [
										{id: 10, name: '衡阳湘莲地理标志证书'}
									]
									}
								]
							};
							
							// 收集所有证书
							this.allCertificates = [];
							this.traceData.steps.forEach(step => {
								if (step.certificates) {
									this.allCertificates = this.allCertificates.concat(step.certificates);
								}
							});
							
							this.loading = false;
							this.$message.success('溯源信息查询成功');
						}, 1500);
					},
					resetForm() {
						this.searchForm = {
							traceCode: ''
						};
						this.traceData = null;
						this.searched = false;
						this.showQRScanner = false;
						this.allCertificates = [];
					},
					showScanner() {
						this.showQRScanner = !this.showQRScanner;
					},
					simulateQRScan() {
						this.searchForm.traceCode = 'YN' + Date.now().toString().substr(-16);
						this.showQRScanner = false;
						this.$message.success('二维码扫描成功');
						this.searchTrace();
					},
					downloadCert(cert) {
						this.$message.success(`正在下载：${cert.name}`);
						// 这里可以实现真实的文件下载逻辑
					},
					downloadAllCerts() {
						this.$message.success('正在打包下载全部凭证...');
						// 这里可以实现批量下载逻辑
					}
				}
			});
	</script>
</body>
</html>